<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1. 组件的定义：实现应用中局部功能代码和资源的集合（组件就像一块砖，哪里需要哪里搬）
        2. 非但文件组件 & 单文件组件
            非单文件组件：一个文件中包含有n个组件（.html）
            单文件组件：一个文件中只包含1个组件（.vue）

    -->

    <!-- 
        Vue中使用组件的三大步骤：
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件（写组件标签）
        一、如何定义一个组件？
            使用Vue.extend（options）创建，其中options和newVue（options）时传入的那个options几乎一样，但也有点区别；
            区别如下：
                1.el不要写，为什么？—— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                2.data必须写成函数，为什么？—— 避免组件被复用时，数据存在引用关系。
            备注：使用template可以配置组件结构。
        二、如何注册组件？
            1.局部注册：靠newVue的时候传入components选项
            2.全局注册：靠Vue.component（组件名’，组件）
        三、编写组件标签：<school></school>
    -->

    <!-- 本章学习：非单文件组件 -->
    <div id="root">
        <!-- 第三步：使用组件 -->
         <school></school>
         <hr>
         <student></student>
         <hr>
         <hello></hello>
         <hr>
    </div>

    <div id="root2">
        <!-- 第三步：使用组件 -->
        <hello></hello>
    </div>
</body>
    <script>
        // 第一步：创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click='tip()'>点我提示学校名</button>
                </div>            
            `,
            data() {
                return {
                    name:'ZH',
                    address:'ZZ'
                }
            },
            methods: {
                tip() {
                    alert(this.name)
                }
            },
        })
        // 第一步：创建student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生名：{{name}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>            
            `,
            data() {
                return {
                    name:'lee',
                    age:'22'
                }
            }
        })
        // 第一步：创建hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>
                </div>            
            `,
            data() {
                return {
                    msg:'hello'
                }
            }
        })


        // 全局注册
        Vue.component('hello',hello)

        new Vue({
            el:'#root',
            // 第二步：注册组件 (局部注册)
            components: {
                school, // 简写（当字段名和属性名一致）
                student:student
            }
        })

        new Vue({
            el:'#root2'
        })
    </script>
</html>